<!-- 历史数据 -->
<template>
  <div class="app-container" ref="documentAssistant">
    <div class="titleMolde">历史数据
    </div>
    <div class="Filters">
      <el-input v-model="queryParams.deviceCode" style="width: 130px" placeholder="设备号码" />


      <el-select v-model="queryParams.deviceTypeId" placeholder="设备类型" style="width: 100px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div>
        <el-date-picker type="datetimerange" v-model="pickerValue" start-placeholder="Start date"
          format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" end-placeholder="End date" />
      </div>
      <el-button type="primary" @click="handleQuery">搜索</el-button>

      <!-- <el-button type="primary" class="mrg-lf-10">赋值ID</el-button> -->
      <!-- <el-button type="primary" class="mrg-lf-10">导出Excel</el-button> -->
    </div>



    <el-table v-loading="loading" Virtual-scroll ref="multipleTable" :data="pageData" :max-height="tableHeight"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" v-if="dataHeaders" />
      <el-table-column v-for="(item, index) in dataHeaders" :key="index" :label="item.name" :property="item.fileId"
        align="center" :width="item.fileId === 'originTime' ? '200px' : 'auto'" />


    </el-table>
    <pagination @pagination="handleQuery" size="small" layout="sizes, prev, pager, next"
      v-model:total="queryParams.pages.total" v-model:page="queryParams.pages.current"
      v-model:limit="queryParams.pages.size" />
  </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import LogAPI, { LogPageVO, LogPageQuery } from "@/api/log";
import deviceDataApi, { GetHistoricalDataParams } from "@/api/deviceData";
import DeviceTypeApi, { typeOptions } from "@/api/deviceType"


let pickerValue = ref()
let tableHeight = ref(600);
const loading = ref(false);
const removeIds = ref([]);
let pageData = ref()
let dataHeaders = ref()
let options = ref<typeOptions[]>([]);
// 获取单个documentAssistant
const documentAssistant = ref<HTMLElement | null>(null);


/** 用户查询参数  */
const props = defineProps({
  ld: {
    type: String,
    required: true,
  },
});
let customerId = props.ld
// 监听 message 的变化 
watch(() => props.ld, (newMessage, oldMessage) => {
  console.log(66666666, newMessage, oldMessage);
  if (newMessage !== oldMessage) {
    console.log('chengg');
    queryParams.customerId = newMessage
    deviceTypeOptions()
  }

});
// let queryParams = reactive<LogPageQuery>({
//   "pages": {
//     "current": 1,
//     "size": 10,
//     "startTime": "",
//     "endTime": "",
//     "orders": [
//       {
//         "column": "",
//         "asc": true
//       }
//     ]
//   },
//   customerId:customerId,

//   "module": "",
//   "operation": "",
//   "content": "",
//   "type": "0",
//   "ip": "",
// });
// 获取历史列表

let queryParams = reactive<GetHistoricalDataParams>({
  pages: {
    "current": 1,
    "size": 10,
    "total": 0,
    startTime: "",
    endTime: "",
    orders: [
      {
        column: "",
        asc: true
      }
    ]
  },
  /* */
  customerId: customerId,

  /* */
  deviceTypeId: '',

  /* */
  deviceCode: undefined

});

// function changedevietype(value:any){
//   console.log(value);
//   for(let i in options.value){
//     console.log(options.value[i]);
//     if(value==options.value[i].value){
//       deviceTypename.value=options.value[i].label
//     }

//   }
// }

/** 查询设备类型下拉列表 */
let deviceTypename = ref('')
function deviceTypeOptions() {
  // 调用设备类型 API 并处理返回数据
  DeviceTypeApi.deviceTypeOptions()
    .then((data) => {
      // 确保 data 是一个数组

      // 将返回的选项存储到 options 中
      options.value = data;
      deviceTypename.value = data[0].label;
      console.log('‘oppppppppppp', options, data);


      // 添加全选选项

      // 更新查询参数
      queryParams.deviceTypeId = data[0].value; // 设置默认值为第一个设备类型
      handleQuery(); // 调用查询函数

    })

}
// function  (){
//   BmscontrolApi.deviceHistoricalData(querytodayParams).then(()=>{

//   })

// }
/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
/** 查询 */
function handleQuery() {
  loading.value = true;
  console.log(queryParams, '');
  for (let i in options.value) {
    console.log(options.value[i]);
    if (queryParams.deviceTypeId == options.value[i].value) {
      deviceTypename.value = options.value[i].label
    }

  }
  pageData.value = []
  if (pickerValue.value) {
    console.log(pickerValue.value);

    queryParams.pages.startTime = pickerValue.value[0]
    queryParams.pages.endTime = pickerValue.value[1]
  }
  deviceDataApi.getHistoricalData(queryParams)
    .then((data) => {
      pageData.value = data.data.records;
      dataHeaders.value = data.headers
      queryParams.pages.total = data.data.total;
      queryParams.pages.current = data.data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  deviceTypeOptions()
  tableHeight.value = (documentAssistant.value as HTMLElement).clientHeight - 65 - 24 - 52 - 20;

});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}
</style>
